import React, { useEffect, useState } from "react";
import axios from "../../../../model/User";
import { Table, Tag, Space } from "antd";
export default function UserOrder() {
  let [order, setorder] = useState<any>();
  let [info, setinfo] = useState<any>();
  let [arr, setarr] = useState<any>();
  let xuanran=async ()=>{
      let id=window.location.hash.substring(25)
    let arr:any=await axios.userorder({ uid: id });
    let arrs:any=await axios.query({id})
    console.log(arrs.data)
    let len = 30;
    let arrays = [];
    for (let i = 0; i < len; i++) {
      let obj = {
        number: arr.data[i].number,
        time: arr.data[i].time,
        shopping: (
          <div>
            <div style={{ float: "left" }}>
              <img style={{ width: "70px" }} src={arr.data[i].img}></img>
            </div>
            <div style={{ float: "right" }}>
              <div>{arr.data[i].name}</div>
              <div>
                <span>单价:{arr.data[i].price}</span>&nbsp;&nbsp;
                <span>数量:{arr.data[i].num}</span>
              </div>
            </div>
          </div>
        ),
        user: (
          <div>
            <div style={{ float: "left" }}>
              <img src={arrs.data[0].touxiang}></img>
            </div>
            <div style={{ float: "right" }}>
              <div>{arrs.data[0].username}</div>
              <div>{arrs.data[0].tel}</div>
            </div>
          </div>
        ),
        pay: arr.data[i].pay,
        delivery: arr.data[i].delivery,
        state: arr.data[i].state,
        payment: arr.data[i].payment,
      }

      arrays.push(obj);
    //   console.log(obj);
    }
    setarr(arrays);
    // console.log(arrays);
  }
  useEffect(() => {
    let id = window.location.hash.substring(25);
    axios
      .query({ id })
      .then((res) => {
        console.log(res.data[0]);
        setinfo(res.data[0]);
      })
      .then(() => {
        axios
          .userorder({ uid: id })
          .then((res) => {
            console.log(res.data);
            setorder(res.data);
          })
          .then(() => {
            
           xuanran();
          });
      });
  }, []);
  const columns = [
    {
      title: "订单编号",
      dataIndex: "number",
      key: "number",
    },
    {
      title: "下单时间",
      dataIndex: "time",
      key: "time",
    },
    {
      title: "商品详情",
      dataIndex: "shopping",
      key: "shopping",
    },
    {
      title: "买家详情",
      key: "user",
      dataIndex: "user",
    },
    {
      title: "支付方式",
      key: "pay",
      dataIndex: "pay",
    },
    {
      title: "发货方式",
      key: "delivery",
      dataIndex: "delivery",
    },
    {
      title: "订单状态",
      key: "state",
      dataIndex: "state",
    },
    {
      title: "实付金额",
      key: "payment",
      dataIndex: "payment",
    },
  ];

  const data = arr;
  return (
    <div>
      <Table columns={columns} dataSource={data} pagination={{ pageSize: 3 }} rowKey="id"  />
    </div>
  );
}
